<template>
  <view class="select-box-wrap">
    <view class="mask" @click="onClickOperate($event, 'close', {})"></view>
    <view class="box-module">
      <!-- 头部 -->
      <view class="top">
        <view class="title">选盒号</view>
        <img
          class="close-icon"
          src="../img/back-1.png"
          alt=""
          @click="onClickOperate($event, 'close', {})"
        />
      </view>
      <scroll-view class="box-scroll" scroll-y>
        <!-- boxs -->
        <view class="boxs" v-if="details.list.length > 0">
          <view
            class="box-item"
            :class="[
              details.chose_list.indexOf(item.number) > -1 || item.status == 0
                ? 'disabled'
                : '',
              selected.indexOf(item.number) > -1 ? 'selected' : '',
            ]"
            v-for="(item, index) in details.list"
            :key="index"
            @tap="onClickOperate($event, 'select', item)"
          >
            <view class="block">
              <view class="ordinal"> {{ item.number }} </view>
              <image class="cover" :src="details.box_cover_image"></image>
            </view>
            <img
              class="seal"
              src="../img/231.png"
              v-if="details.chose_list.indexOf(item.number) > -1"
            />
            <view class="avatar" v-if="item.status == 0">
              <image class="img" :src="item.avatar" />
            </view>
            <view class="can-select" v-else></view>
          </view>
        </view>
      </scroll-view>

      <!-- bottom 底部提交栏 -->
      <view class="submit">
        <view class="selected-number">
          <text>您已选号：</text>
          <view class="numbers">
            <view
              class="item-number"
              v-for="(item, index) in intervals"
              :key="index"
              >{{ item }}</view
            >
            <view
              class="item-number"
              v-if="selected.length >= 7"
              hover-class="hover-bubble"
              @tap="lookMore"
              ><u-icon name="more-dot-fill"></u-icon
            ></view>
          </view>
        </view>
        <view class="btn">
          <view
            class="lottery-btn"
            hover-class="hover-bubble"
            :key="index"
            @tap="onClickOperate($event, 'operate', payMode[0])"
            ><image class="bg-icon" :src="payMode[0].img" />
            <text class="">{{ payMode[0].label }}</text>
            <view> ￥{{ details.price.all || '-.--' }} </view>
          </view>
          <view
            class="lottery-btn"
            hover-class="hover-bubble"
            :key="index"
            @tap="onClickOperate($event, 'operate', payMode[1])"
            ><image class="bg-icon" :src="payMode[1].img" />
            <text class="">{{ payMode[1].label }}</text>
            <view> ￥{{ price }}</view>
          </view>
        </view>

        <view class="bubble" v-if="more">
          <view
            class="item-number"
            v-for="(item, index) in selected"
            :key="index"
            >{{ item }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(100);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    initiallyId: {
      type: [String, Number],
      default: '',
    },
    boxId: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      selected: [],
      details: {
        box_cover_image: '',
        chose_list: [],
        list: [],
        price: {},
      },
      payMode: [
        {
          id: 'all',
          label: '全收',
          img:
            this.$IMG_URL +
            '/uploads/20230525/54c8d912b3e40a9099df5242bdba9d62.png',
        },
        {
          id: 'confrim',
          label: '确定',
          img:
            this.$IMG_URL +
            '/uploads/20230524/ebbd516dd715334ca5c5786fba84e613.png',
        },
      ],
      more: false,
    };
  },
  // 计算属性 适配者模式
  computed: {
    price() {
      let i = this.details.price.single;
      return i * this.selected.length || '0.00';
    },
    intervals() {
      let arr = [];
      if (this.selected.length >= 7) {
        arr = this.selected.slice(0, 7);
      } else {
        arr = this.selected;
      }
      return arr;
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {
    this.getData();
  },
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    /**
     *  页面点击事件 防抖
     * @param {Object} ev  $event
     * @param {String} name 执行名称
     * @param {Object} data 传值
     */
    onClickOperate(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          case 'close':
            this.close();
            break;
          case 'select':
            this.onSelect(data);
            break;
          case 'operate':
            this.onOperate(data);
            break;
        }
      });
    },
    // 关闭 弹窗
    close() {
      this.$emit('showSelectBoxMod', false);
    },
    getData() {
      this.$http(
        'v1.getfullOpenBoxsChooseBoxs',
        {
          id: this.initiallyId,
          box_id: this.boxId,
        },
        '加载中'
      ).then((res) => {
        this.details = res.data;
      });
    },
    onSelect(item) {
      if (item.status == 0) {
        // uni.showToast({
        //   title: '不可选',
        //   icon: 'none',
        //   mask: true,
        // });
        return;
      }
      if (this.details.chose_list.includes(item.number)) return;
      let arr = [...this.selected];
      let index = arr.indexOf(item.number);
      if (index > -1) {
        arr.splice(index, 1);
      } else {
        arr.push(item.number);
      }
      this.selected = [...new Set(arr)];
    },
    lookMore() {
      this.more = !this.more;
    },
    // 点击操作
    onOperate(ev) {
      // console.log(ev, this.selected);
      this.$emit('operate', { mode: ev, selected: this.selected });
    },
  },
};
</script>
<style lang="scss" scoped>
.select-box-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100074;
  width: 100vw;
  height: 100vh;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
  }
  .box-module {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 1050rpx;
    background-image: linear-gradient(100deg, #ddf4fe, #f0e5fe);
    border-radius: 10rpx 10rpx 0 0;
    animation: slide-in-bottom 1s linear 0s 1 normal none;
    .box-scroll {
      width: 100%;
      height: calc(1050rpx - 200rpx);
    }
    .boxs {
      display: grid;
      // 3是多少行列 后面 100px是列宽，行的设置同理
      grid-template-columns: repeat(3, var(--w));
      grid-template-rows: repeat(3, var(--w));
      // 行列间距
      column-gap: 20rpx;
      row-gap: 20rpx;
      padding: 0 32rpx 150rpx;
      --w: 215rpx;

      .box-item {
        position: relative;
        width: var(--w);
        height: var(--w);
        border-radius: 15rpx;
        // overflow: hidden;
        --rw: 56rpx;
        --decolor: linear-gradient(
          45deg,
          rgba(12, 226, 213, 1),
          rgba(116, 92, 232, 1)
        );
        --secolor: linear-gradient(
          45deg,
          rgba(250, 100, 151, 1),
          rgba(153, 26, 236, 1)
        );
        --content: '可选';
        &.disabled {
          .block {
            filter: grayscale(100);
          }
        }
        &.selected {
          --decolor: var(--secolor);
          --content: '选中';
          box-shadow: 0 0 10rpx 10rpx rgba(251, 100, 151, 1);
        }

        .block {
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          width: 100%;
          height: 100%;
          background: url('../img/122.png') no-repeat;
          background-size: 100% 100%;
        }
        .seal {
          position: absolute;
          left: calc(50% - 78rpx);
          top: calc(50% - 75rpx);
          z-index: 12;
          width: 156rpx;
          height: 150rpx;
        }
        .ordinal {
          position: absolute;
          top: 0;
          left: 0;
          width: 45rpx;
          height: 40rpx;
          border-radius: 15rpx 0 15rpx 0;
          text-align: center;
          line-height: 40rpx;
          font-size: 30rpx;
          font-weight: bold;
          color: #ffffff;
          background-image: var(--decolor);
        }

        .cover {
          width: 100%;
          height: 100%;
        }
        .avatar {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          bottom: -2rpx;
          right: -2rpx;
          z-index: 1;
          width: var(--rw);
          height: var(--rw);
          border-radius: 15rpx 0 15rpx 0;
          background-color: #fff;
          .img {
            width: calc(var(--rw) - 6rpx);
            height: calc(var(--rw) - 6rpx);
            border-radius: 13rpx 0rpx 13rpx 0rpx;
          }
        }
        .can-select {
          background-image: var(--decolor);
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          bottom: -2rpx;
          right: -2rpx;
          z-index: 11;
          width: var(--rw);
          height: var(--rw);
          border-radius: 15rpx 0 15rpx 0;
          &::before {
            content: var(--content);
            display: block;
            font-size: 20rpx;
            font-weight: bold;
            color: #ffffff;
          }
        }
      }
    }
    .top {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 38rpx 30rpx 30rpx;
      width: 100%;
      .title {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        font-weight: 800;
        color: #000000;
      }
      .close-icon {
        // position: absolute;
        // top: 48rpx;
        // right: 30rpx;
        width: 32rpx;
        height: 18rpx;

        &::after {
          content: '';
          position: absolute;
          top: -20rpx;
          left: -20rpx;
          width: 60rpx;
          height: 60rpx;
        }
      }
    }
  }
}

.submit {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 20;
  padding: 34rpx 46rpx;
  width: 100%;
  height: 230rpx;
  background: #ffffff;

  .selected-number {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
    padding-bottom: 28rpx;
    border-bottom: 2rpx dashed rgba(112, 112, 112, 1);
    font-size: 24rpx;
    font-weight: 500;
    color: #000000;
  }
  .numbers {
    margin-left: 4rpx;
    display: flex;
    flex-wrap: wrap;
  }
  .item-number {
    margin: 0 8rpx;
    width: 51rpx;
    height: 50rpx;
    background-image: radial-gradient(
      circle at 100% 0,
      #938ef5 33.333%,
      #c881c2 100%
    );

    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
    line-height: 50rpx;
    text-align: center;
    border-radius: 50%;
  }
  .btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .lottery-btn.disabled {
    filter: grayscale(100%);
  }
  .lottery-btn {
    position: relative;
    width: 309rpx;
    height: 75rpx;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    & > view {
      position: relative;
      z-index: 1;
      font-size: 24rpx;
      font-weight: bold;
      color: #ffffff;
    }
    text {
      position: relative;
      z-index: 1;
      font-size: 26rpx;
      height: 26rpx;
      font-weight: 800;
      color: #ffffff;
    }
    .bg-icon {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
}
.bubble {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  bottom: 210rpx;
  right: 46rpx;
  z-index: 6;
  padding: 30rpx 26rpx 15rpx;
  width: calc(100% - 92rpx);
  min-height: 100rpx;
  border-radius: 20rpx;
  background-color: rgba(27, 46, 93, 1);
  filter: drop-shadow(0 0 2rpx rgba(50, 169, 225, 1));
  animation: scale-in-br 0.6s linear 0s 1 normal none;
  &::before {
    content: '';
    position: absolute;
    bottom: -30rpx;
    left: calc(130rpx + (60rpx * 8));
    width: 0;
    height: 0;
    border: 16rpx solid transparent;
    border-left: 10rpx solid transparent;
    border-right: 10rpx solid transparent;
    border-top-color: rgba(27, 46, 93, 1);
  }
  .item-number {
    margin: 0 11rpx 15rpx;
  }
}
</style>
